<!--
 * @Author: ૮₍ ˙О˙₎ა
 * @Date: 2023-08-07 10:49:51
-->
<template>
  <div class="goods_cart_container" @click="toGoodsDetail">
    <!-- 商品图片 -->
    <img class="good_img" :src="item.listPicUrl" />

    <!-- 商品详细信息 -->
    <div class="goods_item_info">
      <!-- 商品名称 -->
      <div class="goods_item_info_name">{{ item.name }}</div>
      <!-- 商品价格 -->
      <div class="goods_item_info_bottom">
        <div class="goods_item_info_price">
          <div class="text">¥{{ item.retailPrice }}</div>
        </div>
        <div class="goods_item_info_origin_price" v-if="!!item.counterPrice">
          <div class="text">¥{{ item.counterPrice }}</div>
        </div>
      </div>
      <div class="tjqg" v-if="!!item.counterPrice">
        <span class="span1">特价</span>
        <span class="span2">正在抢购中</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import router from '@/router'

const itemProps = defineProps<{
  item: any
}>()

const toGoodsDetail = () => {
  router.push('/goodsDetail')
}
</script>

<script lang="ts">
export default {
  name: 'GoodsCard'
}
</script>

<style lang="less" scoped>
.goods_cart_container {
  background: #fff;
  border-radius: 18px;
  margin: 20px 2px;
}

.good_img {
  width: 172px;
  max-height: 360px;
  border-radius: 16px;
}

.goods_item_info {
  width: 172px;
  display: flex;
  flex-direction: column;
}

.goods_item_info .goods_item_info_name {
  font-size: 15px;
  line-height: 20px;
  width: 172px;
}

.goods_item_info .goods_item_info_promo {
  padding-top: 20rpx;
  padding-bottom: 3px;
  font-size: 12px;
  color: #71797f;
  overflow: hidden;
  text-overflow: ellipsis;
}

.goods_item_info_bottom {
  display: flex;
  line-height: 30px;
  margin-top: 5px;
}

.goods_item_info_bottom .goods_image {
  width: 30px;
  height: 20px;
}

.goods_item_info_price {
  font-size: 30px;
  font-weight: bold;
  color: #f3514f;
}

.goods_item_info_price .text {
  font-size: 22px;
  font-weight: bold;
  padding-right: 4px;
  font-weight: normal;
}

.goods_item_info_origin_price {
  flex: 1;
  font-size: 20px;
  color: #71797f;

  margin-left: 6%;
  margin-top: 4px;
}

.goods_item_info_origin_price .text {
  font-size: 12px;
  text-decoration-line: line-through;
}
.tjqg {
  background-color: #ffe9eb;
  line-height: 18px;
  font-size: 13px;
  border-radius: 50px;
  .span1 {
    text-align: center;
    display: inline-block;
    width: 36px;
    border-radius: 50px;
    background-color: #fa1e32;
    color: white;
  }
  .span2 {
    padding-left: 5px;
    font-size: 13px;
    font-weight: bold;
    color: #fa1e32;
  }
}
</style>
